<template>
  <div class="login_container">
    <div class="login_box">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <div class="title-container">
          <span class="title-bg"></span>
          <!-- <div class="line-tag"></div> -->
          <div class="title">能源管理系统</div>
          <!-- <div class="title">苏州地铁2号线能源管理系统</div> -->
          <!-- <div class="login-status" v-show="loading">欢迎登录！</div> -->
        </div>

        <el-form-item prop="username">
          <div class="input_place place_name"></div>
          <el-input
            ref="username"
            v-model="loginForm.username"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="off"
            placeholder="请输入用户名"
          />
        </el-form-item>

        <el-form-item prop="password">
          <div class="input_place place_password"></div>
          <el-input
            :key="passwordType"
            ref="password"
            v-model="loginForm.password"
            :type="passwordType"
            name="password"
            tabindex="2"
            auto-complete="off"
            placeholder="请输入密码"
            @keyup.enter.native="handleLogin"
          />
        </el-form-item>

        <el-form-item>
          <el-button :loading="loading" class="btn-color" @click.native.prevent="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import store from "../../store/index.js";
import { login } from "../../api/base8012.js";
import JSEncrypt from "jsencrypt";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名！", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码！", trigger: "blur" }]
      },
      loading: false,
      passwordType: "password",
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },

  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      if (this.loginForm.username != "" && this.loginForm.password != "") {
        const Encry = new JSEncrypt();
        const publicKey =
          "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAn0wChlUP05g7gBc31xml8lM3wyCsbLL7PEl/aC86IaMGv19w+D4+04RwHwyoFxK7A2xGaX8gR5CZ8eZjnn8UJySgKN6p18Zko/n2S3PhjlOt/aya/HHZvl+pAi82hJnq2VDMuTN4weLmhL108N4zj+aHLt6YnJuNn/xwfuYvCvb0j5tikeRrO+MIMc488ndDXSGA3BLK2choSOhRpsfCs8DGQPJLKgndPjitpaTkDjuGhFE/W0yPhVPx9CYtT7L/TiVkyha+ut+b0mkgvD8QLBaP530BiF78r3Fb4c4WfwUu5hn2i1IPcuEAeql+xoV5MNhqVteRUJzFmQ438OcUCQIDAQAB";
        Encry.setPublicKey(publicKey);

        const obj = {
          userName: this.loginForm.username,
          passWord: Encry.encrypt(this.loginForm.password),
          systemCode: "iot_zhny_001",
          enterpriseCode: "iot-12"
        };

        login(obj).then(res => {
          if (res.code == 0) {
            const role = res.result.additionalInformation.isCenter;
            const deptCode = res.result.additionalInformation.deptCode;
            const deptName = res.result.additionalInformation.deptName;
            const username = res.result.additionalInformation.username;

            const lineToken = "Bearer" + res.result.value;
            sessionStorage.setItem("token_12", lineToken);
            sessionStorage.setItem("timestamp_12", new Date().getTime());
            checkRole();
            function checkRole() {
              if (role) {
                sessionStorage.setItem("stationCode", "S00");
                store.commit("SET_CENTER", true);
                store.commit("SET_NAVLINK", true);
                store.commit("SET_STATIONCODE", "S00");
                store.commit("SET_USERNAME", username);
              } else {
                store.commit("SET_CENTER", false);
                store.commit("SET_NAVLINK", false);
                store.commit("SET_STATIONCODE", deptCode);
                store.commit("SET_DEPTNAME", deptName);
                store.commit("SET_USERNAME", username);
              }
            }
            setTimeout(() => {
              this.$router.replace({ path: "/dvfullscreen" });
            }, 500);
            this.$message.success({
              message: "欢迎登入！",
              duration: 500
            });
          } else {
            this.$message.error(res.message);
            return false;
          }
        });
      } else {
        this.$message.error({
          message: "账号或密码不能为空！",
          duration: 800
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-input__inner {
  -webkit-text-fill-color: #eee; //文字颜色
  caret-color: #eee; //光标颜色
  // box-shadow: inset 0 0 0 1000px #141f37 !important; //背景颜色
  transition: background-color 99999s ease-in-out 0s;
}
/deep/input::-webkit-input-placeholder {
  -webkit-text-fill-color: #5f757f !important; //placeholder的文字颜色
}

.login_container {
  height: 100%;
  width: 100%;
  background: url("../../assets/img/bj.png") no-repeat center;
  background-size: cover;
}
.login_box {
  width: 640px;
  height: 660px;
  // background: url("../../assets/img/login-border.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.title-container {
  // display: flex;
  width: 100%;
  margin: 80px 0;
  // justify-content: center;
  // align-items: center;
}
.el-form-item {
  margin: 30px auto;
  width: 440px;
  height: 60px;
  position: relative;
  // border: 1px solid #00b4ff;
  // border-radius: 30px;
}
.input_place {
  position: absolute;
  width: 58px;
  height: 58px;
  // border-right: 1px solid #eee;
  line-height:24px;
  font-size: 18px;
  color: #eee;
  top: 50%;
  transform: translateY(-50%);
}
.place_name {
  width: 58px;
  height: 58px;
  background: url("../../assets/img/user.png") no-repeat center;
  background-size: cover;
  z-index: 9;
}
.place_password {
  background: url("../../assets/img/password.png") no-repeat center;
  background-size: cover;
  z-index: 9;

}

/deep/ .el-input__inner {
  width: 440px;
  height: 60px;
  border: 1px solid #00b4ff;
  // border-radius: 30px;
  background: transparent;
  font-size: 20px;
  color: #ffffff;
  padding-left: 90px;
}
.title-bg {
  width: 250px;
  height: 64px;
  margin: 0 auto;
  background: url("../../assets/img/logo.png") no-repeat center;
  background-size: 100% 100%;
  display: block;
}
.login-status {
  text-align: center;
  font-size: 16px;
  color: #ffffff;
}
.title {
  width: 100%;
  height: 56px;
  text-align: center;
  font-size: 34px;
  margin: 16px auto;
  font-weight: 400;
  color: #ffffff;
  line-height: 56px;
}
.line-tag {
  width: 1px;
  height: 34px;
  background: #ffffff;
  margin: 0 30px;
}
.btn-color {
  width: 440px;
  height: 54px;
  margin: 40px auto;
  background: #28c2ff;
  // box-shadow: 0px 0.25rem24px 0px #093b71;
  // border-radius: 0.4rem;
  font-size:24px;
  font-weight: bold;
  color: #ffffff;
}
.login-container .el-form-item {
  background: rgba(0, 0, 0, 0) !important;
}
</style>
